<template>
    <div>
        <el-form :model="form" :rules="rules" label-position="right" ref="form" label-width="160px">
            <el-form-item label="应用名称：" prop="cma_name">
                <el-col :span="8">
                    <el-input v-model="form.cma_name" placeholder="请输入应用名称"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="应用描述：" prop="cma_describe">
                <el-col :span="8">
                    <el-input type="textarea" v-model="form.cma_describe" rows="5" placeholder="请输入应用描述"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="应用的类型：" prop="cma_type">
                <el-col :span="15">
                    <el-radio v-model="form.cma_type" label="0" >内容管理系统</el-radio>
                    <div class="formDescText">内容管理系统，适用于如企业站，新闻站，信息站等一些内容管理相关的业务</div>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('form')">提交</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import { mapState,mapMutations } from 'vuex'
    export default {
        //数据源
        data(){
            return {
                rules : {
                    cma_name : [
                        { required: true, message: '请输入应用名称', trigger: 'blur' }
                    ],
                    cma_describe : [
                        { required: true, message: '请输入应用描述', trigger: 'blur' }
                    ]
                }
            }
        },
        //初始化函数
        mounted() {

        },
        //计算属性
        computed: {
            ...mapState({
                form : state => state.AddApplicationModule.form
            })
        },
        //组件方法
        methods: {
          
            submitForm(form){

                this.$refs[form].validate((valid) => {

                    if (valid) {

                        //判断应用产品ID
                        var productId = 0;
                        if(this.form.cma_type == 0){
                            productId = 1;
                        }

                        var params = {
                            cma_uid      : this.$localData.getUserId(),
                            cma_name     : this.form.cma_name,
                            cma_describe : this.form.cma_describe,
                            cma_type     : this.form.cma_type,
                            cma_apid     : productId
                        }

                        this.$myLoading.startLoading("正在创建云应用，请耐心等候...")
                        this.$http.postHttp(
                            this.$API.userCreateApplication,
                            params,
                            rs => {
                                this.$myLoading.endLoading()
                                this.$store.commit('AddApplicationModule/clearForm')
                                this.$myPop.alertBox("成功提示","恭喜您，云应用已创建完成，您可以在应用列表中来查看和管理您的应用");
                                
                            }
                        )

                    }

                })
            },

            resetForm(){
                this.$store.commit('AddApplicationModule/clearForm')
            }
        }
    }
</script>

<style lang="stylus" scoped>
@import '~PUBLIC_CSS';
</style>